<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<!--派生选择器设置提示信息的字体颜色-->
		<style type="text/css">
			td div span {
				color: red;
			}
		</style>
		<!--设置表单验证-->
		<script type="text/javascript">
			//1.进行姓名输入验证
			function checkName() {
				//获取用户名输入对象的内容
				var txtName = document.getElementById("txtName").value;
				//错误信息提示框
				var sptxtName = document.getElementById("sptxtName");
				if(txtName == null || txtName == "") {
					//提示信息
					sptxtName.innerHTML = "请输入姓名！"
						//改变标志量
					return false;
				} else {
					//清空错误提示信息
					sptxtName.innerHTML = ""
						//改变标志量
					return true;
				}
			}
			//2.进行密码输入验证
			function checkPsw() {
				//获取密码输入对象的内容
				var txtPsw = document.getElementById("txtPsw").value;
				var spPsw = document.getElementById("spPsw");
				if(txtPsw == null || txtPsw == "") {
					//提示型芯
					spPsw.innerHTML = "请输入密码！"
					return false;
				} else {
					spPsw.innerHTML = "";
					return true;
				}
			}
			//3.进行性别必选验证
			function checkSex() {
				var radSex = document.getElementsByName("radSex");
				//使用循环遍历单选组是否进行了选择
				//定义标志量初始为false
				var chSex = false;
				for(var i = 0; i < radSex.length; i++) {
					//判定性别选项是否被选择
					if(radSex[i].checked) {
						//选择了就将标志位设置为true，并跳出循环
						chSex = true;
						break;
					}
				}
				//信息提示框
				var spradSex = document.getElementById("spradSex");
				if(!chSex) {
					spradSex.innerHTML = "请选择性别!"
					return false;
				} else {
					spradSex.innerHTML = ""
					return true;
				}
			}
			//4.进行兴趣爱好必选验证
			function checkHobby() {
				var chHobby = document.getElementsByName("chHobby");
				//使用循环遍历多选组是否进行了选择
				//定义标识量初始为false
				var cheHo = false;
				for(var i = 0; i < chHobby.length; i++) {
					if(chHobby[i].checked) {
						cheHo = true;
						break;
					}
				}
				//信息提示框
				var spHobby = document.getElementById("spHobby");
				if(!cheHo) {
					spHobby.innerHTML = "请选择至少一种爱好！"
					return false;
				} else {
					spHobby.innerHTML = "";
					return true;
				}
			}
			//5.进行学历必选验证
			function checkGrade() {
				//学历必选验证
				var selectXL = document.getElementById("selectXL").value;
				//信息提示框
				var spGrade = document.getElementById("spGrade");
				if(selectXL == null || selectXL == "") {
					//验证失败
					//提示错误信息
					spGrade.innerHTML = "请选择学历！";
					return false;
				} else {
					spGrade.innerHTML = "";
					return true;
				}
			}
			//6.进行最后的提交验证
			function checkMe() {
				var ischName = checkName();
				var ischPsw = checkPsw();
				var ischSex = checkSex();
				var ischHobby = checkHobby();
				var ischGrade = checkGrade();
				if(ischName && ischPsw && ischSex && ischHobby && ischGrade) {
					return true;
				} else {
					return false;
				}
			}
		</script>
	</head>

	<body>
		<!--form表单：客户端浏览器用来向服务器端进行信息提交的标签
			写在form表单的标签的值才会被提交给服务器
			action -- 指定的是服务器端的那个程序（类-方法）进行响应；
			method -- 使用哪种方式进行数据从客户端发送到服务器。
			      选项：get -- 将客户端数据信息附加在访问连接url的尾端进行发送信息；
			                 缺点：需要附加在url之后，可能会以明文的形式显示，信息不安全；
			                长度会受到限制（不能大于255个制度） 
			                汉字容易乱码（字节流方式传输）
			       post -- 将客户端数据信息以数据包的形式发送到服务器端
			                 不在上述问题。
		-->
		<div align="center">
			<form action="index_action.jsp" method="get">
				<table border="1" cellpadding="0" cellspacing="0" bordercolor="#AAD7DB" style="width: 80%; align-self: center;">
					<tbody>
						<tr>
							<td>姓名</td>
							<td><input type="text" id="txtName" name="txtName" onblur="checkName();" />
								<div><span id="sptxtName"></span></div>
							</td>
						</tr>
						<tr>
							<td>登录密码</td>
							<td><input type="password" id="txtPsw" name="txtPsw" onblur="checkPsw();" />
								<div><span id="spPsw"></span></div>
							</td>
						</tr>
						<tr>
							<td>性别</td>
							<!--radio类型的输入框：需要name属性值一样，才具有互斥选择性-->
							<td><input type="radio" id="radSex" name="radSex" onclick="checkSex();" /> 女
								<input type="radio" id="radSex2" name="radSex" onclick="checkSex();" />男
								<input type="radio" id="radSex3" name="radSex" onclick="checkSex();" />未知
								<div><span id="spradSex"></span></div>
							</td>
						</tr>

						<tr>
							<td>个人简历</td>
							<td><input type="file" id="fileResume" name="fileResume" /></td>
						</tr>
						<tr>
							<td>兴趣爱好</td>
							<!--checkbox多选框：需要name属性保持一致；服务器是使用数组对一组checkbox控件的值进行接收的-->
							<td><input type="checkbox" id="chHobby1" name="chHobby" value="游泳" onclick="checkHobby();" />游泳
								<input type="checkbox" id="chHobby2" name="chHobby" value="爬山" onclick="checkHobby();" />爬山
								<input type="checkbox" id="chHobby3" name="chHobby" value="dota" onclick="checkHobby();" />dota
								<input type="checkbox" id="chHobby4" name="chHobby" value="coding" onclick="checkHobby();" />coding
								<input type="checkbox" id="chHobby5" name="chHobby" value="testing" onclick="checkHobby();" />testing
								<div><span id="spHobby"></span></div>
							</td>
						</tr>
						<tr>
							<td>隐藏控件</td>
							<td><input style="" type="hidden" name="txthidden" id="txthidden" value="520" /></td>
						</tr>
						<tr>
							<td>学历</td>
							<td>
								<select id="selectXL" name="selectXL" style="width: 120px;" onclick="checkGrade();">
									<option value=""></option>
									<option value="DZ">大专</option>
									<option value="BK">本科</option>
									<option value="SS">硕士</option>
									<option value="BS">博士</option>
								</select>
								<div><span id="spGrade"></span></div>
							</td>
						</tr>
						<tr>
							<td>自我介绍</td>
							<td><textarea id="txtIntroduce" name="txtIntroduce" style="width: 200px;height: 60px;"></textarea></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td><input type="submit" value="提交" id="btnSubmit" onclick="return checkMe();" /></td>
							<td><input type="reset" value="重置" id="btnSubmit" /></td>
						</tr>
					</tbody>
				</table>

			</form>
		</div>
	</body>

</html>